// 要使用的一些包或者插件 要先引入才能用
const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    sass = require('gulp-sass'),
    cssmin = require('gulp-clean-css'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    del = require('del'),
    connect = require('gulp-connect'),
    { createProxyMiddleware } = require('http-proxy-middleware')

// 我们现在学的是 gulp 4.* 版本的语法  定制任务就是书写函数

// 专门写一个对象 用来管理所有的路径
const path = {
    htmlPath:{
        src:'./src/**/*.html',
        dest:'./dist'
    },
    sassPath:{
        src:'./src/sass/*.scss',
        dest:'./dist/css'
    },
    jsPath:{
        src:'./src/js/*.js',
        dest:'./dist/js'
    },
    imgPath:{
        src:'./src/images/*.*',
        dest:'./dist/images'
    },
    libPath:{
        src:'./src/lib/**/*.*',
        dest:'./dist/lib'
    },
    videoPath:{
        src:'./src/video/*.*',
        dest:'./dist/video'
    }
}
const { htmlPath , sassPath , jsPath , imgPath , libPath , videoPath } = path

// 定制一个删除 dist 目录的任务
const delDist = () => del('dist')

// 定制一个 html 任务
const html = () => {
    // gulp.src(你要操作的文件路径)
    // gulp.pipe()
    // gulp.dest(你要把这些处理完的文件放到哪一个路径)
    return gulp.src(htmlPath.src)
        .pipe(htmlmin({
            removeComments: true, // 清除HTML注释
            collapseWhitespace: true, // 压缩HTML
            collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
            minifyJS: true, // 压缩页面JS
            minifyCSS: true // 压缩页面CSS 
        }))
        .pipe(gulp.dest(htmlPath.dest))
        .pipe(connect.reload())  // 只要执行了 html 任务 浏览器自动刷新
}

// 定制一个 sass 任务
// 1、把 sass 转为 css  用到一个包叫做 gulp-sass
// 2、压缩 css   用到一个包叫做 gulp-clean-css
const css = () => {
    return gulp.src(sassPath.src)
        .pipe(sass())  // 把 sass 转为 css
        .pipe(cssmin())   // 压缩 css
        .pipe(gulp.dest(sassPath.dest))
        .pipe(connect.reload())  // 只要执行了 html 任务 浏览器自动刷新

}

//  定制一个 js 任务
//  1、先把 ES6 转为 ES5  babel
// 2、压缩 js 代码    gulp-uglify  
const js = () => {
    return gulp.src(jsPath.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(jsPath.dest))
        .pipe(connect.reload())  // 只要执行了 js 任务 浏览器自动刷新

}

// 定制一个 images 任务 把图片全部复制过去
const images = () => {
    return gulp.src(imgPath.src)
            .pipe(gulp.dest(imgPath.dest))
}
// 定制一个 lib 任务 把要用到的库全部复制过去
const lib = () => {
    return gulp.src(libPath.src)
            .pipe(gulp.dest(libPath.dest))
}

// 定制一个 video 任务 把视频全部复制过去
const video = () => {
    return gulp.src(videoPath.src)
            .pipe(gulp.dest(videoPath.dest))
}

// 定制一个监控文件夹的任务 
const watch = () => {
    gulp.watch(htmlPath.src,html)  // 监控 htmlPath.src 这个路径里面的所有文件 只要有一个发生改变 再次执行 html 任务
    gulp.watch(sassPath.src,css)
    gulp.watch(jsPath.src,js)

}

// 开启一个服务器的方式 
const server = () => {
    connect.server({
        root:'dist',  // 你要运行的是哪一个文件夹
        port:1234,
        livereload:true  ,
        middleware () {
            return [
                createProxyMiddleware('/xmyx', {
                    target: 'http://www.xiongmaoyouxuan.com',
                    changeOrigin: true,
                    pathRewrite: {
                        '^/xmyx':''
                    }
                })
            ]
        }

    })
}

// 执行我们的任务
// series 执行任务 同步执行 写在里面的任务名称先写先执行
// parallel 执行任务 异步执行 不按顺序
// module.exports.default = gulp.series(html,sass)
// module.exports.default = gulp.parallel(html, css,js,images,lib)
module.exports.default = gulp.series(delDist,gulp.parallel(html, css,js,images,lib,video,server,watch))